<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>136.如何使用css + js 创建滑动菜单指示器</title>
  <link href="./style.css" rel="stylesheet">
</head>
<body>
  <ul>
    <div id="marker"></div>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <script>
    const marker = document.querySelector('#marker')
    const item = document.querySelectorAll('ul li a')

    function indicator (e) {
      marker.style.top = e.offsetTop + 'px'
      marker.style.width = e.offsetWidth + 'px'
    }
    item.forEach(link => {
      link.addEventListener('mousemove', e => {
        indicator(e.target)
      })
    })
  </script>
</body>
</html>